<template>
    <div class="process-monitoring-box">
        <div class="certificate-alert-tabs">
            <a-tabs v-model:activeKey="activeKey" type="card" @change="callback">
                <a-tab-pane key="药品" tab="药品"></a-tab-pane>
                <a-tab-pane key="化妆品" tab="化妆品"></a-tab-pane>
                <a-tab-pane key="医疗器械" tab="医疗器械"></a-tab-pane>
            </a-tabs>
        </div>
        <commpVxeTable
        :key="dataTableKey"
         :config="dataTableConfig" 
         :columns="columns" 
         :formItem="formItem"
         :occupancyHeight="55"
         ref="acceptanceRegistrationRef"
         >
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <a-button class="blue-btn" type="primary" @click="increaseClick" icon>新增</a-button>
                </vxe-form-item>
                <vxe-form-item>
                    <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" action="" @change="leadingInClick">
                        <a-button class="blue-btn" type="default"  icon="import">导入</a-button>
                    </a-upload>
                </vxe-form-item>
                <vxe-form-item>
                    <a-button class="blue-btn" type="primary" icon="download" :loading="leadingOutLoading" @click="leadingOutClick">导出</a-button>
                </vxe-form-item>
                <vxe-form-item>
                    <a-button class="blue-btn" type="primary" icon="download" :loading="DownloadTemplateLoading" @click="DownloadTemplateClick">下载模板</a-button>
                </vxe-form-item>
                <vxe-form-item>
                    <a-button class="red-btn" type="primary" @click="batchDeletion" >批量删除</a-button>
                </vxe-form-item>
            </template>
            <template v-slot:fscfw_btn="{row}">
                <!--  marginLeft: `${buttonWidth}px`, -->
                <div :style="{ clear: 'both', whiteSpace: 'nowrap' }">
                    <a-popover placement="bottom" style="width: 150px;">
                        <template slot="content">
                            <div>{{ row.fscfw }}</div>
                        </template>
                        <!-- <template slot="title">
                            <span>Title</span>
                        </template> -->
                        <span>{{ row.fscfw }}</span>
                    </a-popover>
                </div>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form">
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="addEnterpriseAccount(row)">创建账号</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="wfwjClick(row)">违法违规</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="reviseClick(row)">编辑</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="red-btn" type="primary" @click="deleteClick(row)" >删除</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <!-- <compSearchCriteria
         :formItem.sync="formItem" 
         @searchHandleChange="searchHandleChange" 
         v-model="dataTableConfig.requestParams"
         ref="refSearchCriteria"
         />
         <div class="btn-box" style="margin: 20px 0;">
            <div></div>
            <a-form layout="inline" style="display: flex;justify-content: flex-end;">
                <a-form-item>
                    <a-button class="blue-btn" type="primary" @click="increaseClick" icon>新增</a-button>
                </a-form-item>
                <a-form-item>
                    <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" action="" @change="leadingInClick">
                        <a-button class="blue-btn" type="default"  icon="import">导入</a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item>
                    <a-button class="blue-btn" type="primary" icon="download" :loading="leadingOutLoading" @click="leadingOutClick">导出</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button class="blue-btn" type="primary" icon="download" :loading="DownloadTemplateLoading" @click="DownloadTemplateClick">下载模板</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button class="red-btn" type="primary" @click="batchDeletion" >批量删除</a-button>
                </a-form-item>
        </a-form>
         </div>
         
        <div>
            <compTable
             :key="compSelectorkey" 
             :config='dataTableConfig' 
             :columns="columns" 
             :requestParamObj="requestParams" 
             @selectedRowKeys="selectedRowKeys"
             @sorterChange="sorterChange"
             >
                <template v-slot:operation_btn="{record}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form">
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="addEnterpriseAccount(record)">创建账号</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="wfwjClick(record)">违法违规</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="reviseClick(record)">编辑</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" @click="deleteClick(record)" >删除</a-button>
                        </a-form-item>
                    </a-form>
                </template>
            </compTable>
        </div> -->
         <increase ref="refModel" :addEditParameter="addEditParameter" @handleOk="handleOk" @reviseClick="reviseClick"/>
         <wfwjIncrease ref="wfwjIncreaseRef"/>
    </div>
</template>
<script>
import compSearchCriteria from '@/components/compSearchCriteria/compSearchCriteria'
import compTable from '@/components/compTable/compTable'
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import assessCheckApi from './service/api.js'
import increase from './increase.vue'
import { deleteArrServe, leadingInExccel, leadingOutExccel, leadingOutFormwork, addUserQyAccount } from './service/index'
import wfwjIncrease from './wfwjIncrease.vue'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// import { CodeSandboxCircleFill } from '@yuncheng/ych-components'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
  export default {
    components:{
        compSearchCriteria,
        compTable,
        increase,
        wfwjIncrease,
        commpVxeTable
    },
    
    data(){
        return{
            dataTableKey:null,
            activeKey:'药品',
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                paramet:{
                    fqylx:'药品',
                }
            },


            addEditParameter:{},
            addEditVisible:false,
            selectedRowKeysArr:[],//选中表格数据
            compSelectorkey:'',
            requestParams:{},
            formItem:[
                {
                    label: '企业名称',
                    model: 'fqymc',
                },{
                    label: '统一社会信用代码',
                    model: 'ftyshxydm',
                },{
                    label: '企业许可证号',
                    model: 'fqyxkzh',
                },{
                    label: '行政机构',
                    model: 'fxzjg',
                },{
                    label: '所在地区',
                    model: 'fszdq',
                    // placeholder: '所在地区',
                    // type:typeSelect,
                    // dictionaryType:'观察员所属地市'
                }

            ],
            columns: [
            {
                title: '企业名称', //列头显示文字
                field: 'fqymc',
            },{
                title: '违法次数', //列头显示文字
                field: 'fwfcs',
            },{
                title: '企业法定代表人/负责人', //列头显示文字
                field: 'fqyfddbrfzr',
            },{
                title: '企业联系人',
                field: 'fqylxr',
            },{
                title: '企业联系人电话',
                field: 'fqylxrdh',
            },{
                title: '企业联系人邮箱',
                field: 'fqylxryx',
            },{
                title: '企业许可证号',
                field: 'fqyxkzh',
            },{
                title: '企业住所/注册地址',
                field: 'fqyzszcdz',
                key: 'fqyzszcdz'
            },{
                title: '所在地区',
                field: 'fszdq',
            },{
                title: '统一社会信用代码',
                field: 'ftyshxydm',
            },{
                title: '行政机构',
                field: 'fxzjg',
            },{
                title: '操作',
                field: 'id',
                slots: {default: 'operation_btn'}, // 自定插槽格式
                fixed: 'right',
                width:380,
            }],
            leadingOutLoading:false,
            DownloadTemplateLoading:false,
        }
    },
    
    methods:{
        callback(){
            this.dataTableConfig.paramet = {
                fqylx:this.activeKey
            }
            this.dataTableKey = Date.now()
        },
        sorterChange(val,sorter){//获取到排序的数据
            //console.log('获取到排序的数据',val,sorter)
        },
        renovateSearchTabel(){//刷新搜索、表格
            this.compSelectorkey = Date.now()
            this.$refs.refSearchCriteria.resetEvents()
        },
        searchHandleChange(val){//获取搜索数据
            if(val.resetEvents){
                this.compSelectorkey = Date.now()
            }
            this.dataTableConfig.requestParams={...val}
            this.requestParams = {...this.requestParams,...val}
        },
        selectedRowKeys(keys){//获取选中表格rowKey
            this.selectedRowKeysArr = keys
        },
        increaseClick(){//新增
            this.$refs.refModel.visibleShow = true
            this.addEditParameter = {
                fqyfddbrfzr:'',
                fqylxr:'',
                fqylxrdh:'',
                fqylxryx:'',
                fqymc:'',
                fqyxkzh:'',
                fqyxkzyxq:'',
                fqyzszcdz:'',
                fszdq:'南宁',
                ftyshxydm:'',
                fxxdz:'',
                fxzjg:''
            }
        },
        beforeUpload(e){
            return false
        },
        leadingInClick({file}){//导入
            var that = this
            if(typeof file.uid !== 'undefined') {
                if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                    const fileData = new FormData();
                    fileData.append("file",file);
                    fileData.append("fywflcode",'001002');
                    leadingInExccel(fileData).then(res => {
                        that.renovateSearchTabel()
                        that.$message.success('导入成功')
                    }).catch(error =>{
                        that.$message.success('导入失败')
                    })
                }
                
            }
        },
        leadingOutClick(){//导出
            var that = this
            this.leadingOutLoading = true
            var fileName = '企业信息文件'
            let param = { }
            if(that.selectedRowKeysArr.length){
                param = {
                    ids:that.selectedRowKeysArr.join(','),
                    fywflcode:'001002'
                }
            }else{
                param = {...that.requestParams,fywflcode:'001002'}
            }
            
            leadingOutExccel(param).then((data) => {
                this.leadingOutLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })

        },
        DownloadTemplateClick(){//下载模板
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = '企业信息模板'
            let param = { fywflcode:'001002'}
            
            leadingOutFormwork(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                return
                }
                // if (typeof window.navigator.msSaveBlob !== 'undefined') {
                //     window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }))
                // } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                // }
            })
        },
        batchDeletion(){//
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    if(that.selectedRowKeysArr.length){
                        let deleteString = that.selectedRowKeysArr.join(',')
                        deleteArrServe({ids:deleteString}).then(res=>{
                            if(res.code == 200){
                                that.$message.success('删除成功')
                            }else{
                                that.$message.warning(res.message)
                            }              
                            that.renovateSearchTabel()
                        })
                    }else{
                        that.$message.warning('请选择删除项')
                    }
                },
                
            });
            
            
        },
        handleOk(val,id){
            if(val && !id){
                this.dataTableKey = Date.now()
            }else if(val && id){
                this.$refs.acceptanceRegistrationRef.searchEvent()
            }
            
        },
        wfwjClick(val){
            this.$refs.wfwjIncreaseRef.getData({...val})
            this.$refs.wfwjIncreaseRef.visibleShow = true
        },
        addEnterpriseAccount(val){
            var that = this
            this.$confirm({
                title:'您确认要创建账号吗？',
                onOk() {
                    addUserQyAccount({fqyid:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.renovateSearchTabel()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        //编辑
        reviseClick(val){
            var data = val
            this.addEditParameter = {
                id:data.id,
                fqyfddbrfzr:data.fqyfddbrfzr,
                fqylxr:data.fqylxr,
                fqylxrdh:data.fqylxrdh,
                fqylxryx:data.fqylxryx,
                fqymc:data.fqymc,
                fqyxkzh:data.fqyxkzh,
                fqyxkzyxq:data.fqyxkzyxq,
                fqyzszcdz:data.fqyzszcdz,
                fszdq:data.fszdq,
                ftyshxydm:data.ftyshxydm,
                fxxdz:data.fxxdz,
                fxzjg:data.fxzjg
            }
            this.$refs.refModel.visibleShow = true
        },
        //删除
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteArrServe({ids:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }              
                        that.renovateSearchTabel()
                    })
                },
                
            });
            
            
        },
        AddHandleOk(){
            this.renovateSearchTabel()
        }
    },

  }
</script>
<style scoped>
.observer-lbrary-pages{
    background: #fff;
}
.btn-box{
    display: flex;
    justify-content: space-between;
}
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}

</style>
<style lang="less">
    .process-monitoring-box{
        background-color: #fff;
        .certificate-alert-tabs{
            .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
                padding-right: 30px;
                margin-right: 10px !important;
            }
            .ant-tabs-bar{
                margin-bottom: 5px;
            }
            .ant-tabs-tab{
                border-radius: 10px 10px 0 0 !important;
            }
            .ant-tabs-nav-container{
                padding-left: 10px;
                height: 50px !important;
            }
            .ant-tabs-nav-scroll{
                padding-top: 10px;
            }
            .ant-tabs-tab-active{
                background-color: #5ca3e5 !important;
                color: #fff !important;
                border-color: #5ca3e5 !important;
                box-shadow: 0px 0px 12px 0px #5ca3e5;
            }
        }
    }
</style>